import React from 'react'
import { getTypeName } from './EmployManagement'
import { Button, TitleBar, Link } from '../../ui-components'
import { connect } from 'react-redux'
import style from './style.employ-management-update'
import util from '../../util'

export default
@connect(({ employManagement }) => ({ employManagement }))
class EmployManagementDetail extends React.Component {

  state = {
    revoke: false
  }

  componentWillReceiveProps(props) {
    if (props.params.statusType != this.props.params.statusType || props.params.statusUpdateId != this.props.params.statusUpdateId) {
      this.fetchDetail(props)
    }
  }

  componentWillUnmount() {
    this.props.resetEmployManagement()
  }

  fetchDetail(props) {
    props = props || this.props
    this.props.fetchEmployManagementDetail(props.params.statusUpdateId)
  }

  fetchUserCoreProfile(props) {
    props = props || this.props
    this.props.fetchUserCoreProfile(props.params.userId)
  }

  componentDidMount() {
    this.fetchDetail()
  }

  revoke() {
    this.props.revokeUser(this.props.params.statusUpdateId, this.props.params.statusType, () => {
      this.setState({
        revoke: true
      })
    })
  }

  render() {
    const { statusType } = this.props.params
    const typeName = getTypeName(statusType)
    const { detail={} } = this.props.employManagement
    const { userCoreUserProfileVO: user={}, updateDate } = detail
    const revokeSuccess = (
      <div style={{ marginBottom: '20px', marginLeft: '116px', marginTop: '40px', color: '#fff', lineHeight: '40px', paddingLeft: '32px', width: '289px', height: '40px', backgroundColor: '#CAD2DB' }}>{ statusType == 2? '已重新入职': '该转正操作已撤销' }</div>
    )
    return (
      <div>
        <TitleBar
          back
          label={`${typeName}详情`}
        />
        <div className={style.list}>
          <div className={style.user}>
            <label>{typeName}对象</label>
            <div className={style['avatar']}>
              <Link 
                noHover
                src={user.avatarUrl}
                srcIcon="avatar"
                width="120"
              />
              <span style={{color : '#fff', marginLeft: '0px' }}>{ user.fullName || '' }</span>
            </div>
          </div>
          <div>
            <label>{typeName}类型</label>
            <div>
              <p>{ detail.updateType }</p>
            </div>
          </div>
          <div>
            <label>{typeName}日期</label>
            <div>
              <p>{ util.time(detail.updateDate) }</p>
            </div>
          </div>
          <div>
            <label>说明</label>
            <div>
              <p>{ detail.description || '' }</p>
            </div>
          </div>
          {
            updateDate != null && updateDate != -1? (
              !this.state.revoke? (
                <Button style={{ marginBottom: '20px' }} className={style.revoke} label={statusType == 2? '重新入职': '撤销转正'} onClick={::this.revoke}/>
              ): revokeSuccess
            ): (
              updateDate == -1? revokeSuccess: null
            )
          }
        </div>
      </div>
    )
  }
}
